<template>
	<view class="find-ranking-page">
		<!-- 背景图 -->
		<image class="find-ranking-page__bg" src="/static/images/findRanking/顶部戏台.png" mode="aspectFill" />
		<!-- 标题 -->
		<view class="find-ranking-page__title">综合排名榜单</view>
		<!-- 规则 -->
		<image class="find-ranking-page__rule" src="../../static/images/findRanking/规则.png" mode=""></image>
		<!-- 排行榜 -->
		<view class="find-ranking-page__ranking">
			<!-- 前三名 -->
			<view class="find-ranking-page__top">
				<view class="find-ranking-page__block">
					<image class="find-ranking-page__icon" src="../../static/images/findRanking/1.png" mode=""></image>
					<image class="find-ranking-page__avatar" src="../../static/images/findRanking/tx1.png" mode="">
					</image>
					<view class="find-ranking-page__ranking-name">
						张俊丽
					</view>
					<view class="find-ranking-page__ranking-score">
						9211票
					</view>
				</view>
				<view class="find-ranking-page__block">
					<image class="find-ranking-page__icon" src="../../static/images/findRanking/2.png" mode=""></image>
					<image class="find-ranking-page__avatar" src="../../static/images/findRanking/tx2.png" mode="">
					</image>
					<view class="find-ranking-page__ranking-name">
						张俊丽
					</view>
					<view class="find-ranking-page__ranking-score">
						9211票
					</view>
				</view>
				<view class="find-ranking-page__block">
					<image class="find-ranking-page__icon" src="../../static/images/findRanking/3.png" mode=""></image>
					<image class="find-ranking-page__avatar" src="../../static/images/findRanking/tx3.png" mode="">
					</image>
					<view class="find-ranking-page__ranking-name">
						张俊丽
					</view>
					<view class="find-ranking-page__ranking-score">
						9211票
					</view>
				</view>
			</view>
			<!-- 后五名 -->
			<template>
				<view class="find-ranking-page__ranking-tiem" v-for="(item,index) in list.slice(3)">
					<text class="find-ranking-page__ranking-name">{{index+4}}</text>
					<image class="find-ranking-page__avatar-sm" :src="item.avatar" mode="">
					</image>
					<text style="flex-grow: 1;" class="find-ranking-page__ranking-name">{{item.name}}</text>
					<text class="find-ranking-page__ranking-score">2580票</text>
				</view>
			</template>
		</view>
		<!-- 装饰品 -->
		<view class="find-page-data-decorate">
			<image class="find-page-data-decorate__left" src="../../static/images/find/左.png" mode=""></image>
			<image class="find-page-data-decorate__right" src="../../static/images/find/右.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					avatar: '/static/images/findRanking/tx1.png',
					name: '尚凯',
					score: 3750,
				}, {
					avatar: '/static/images/findRanking/tx2.png',
					name: '张俊丽',
					score: 3750,
				}, {
					avatar: '/static/images/findRanking/tx3.png',
					name: '魏培义',
					score: 3750,
				}, {
					avatar: '/static/images/findRanking/tx4.png',
					name: '朱沙欧《鹤鸣黄河岸》',
					score: 3750,
				}, {
					avatar: '/static/images/findRanking/tx5.png',
					name: '《兰考故事 黄河牧歌》',
					score: 3750,
				}, {
					avatar: '/static/images/findRanking/tx6.png',
					name: '《采摘女》',
					score: 3750,
				}, {
					avatar: '/static/images/findRanking/tx7.png',
					name: '《我坐飞机看黄河》',
					score: 3750,
				}, {
					avatar: '/static/images/findRanking/tx8.png',
					name: '《锚勾夕阳》',
					score: 3750,
				}, ],
			};
		}
	}
</script>

<style lang="scss" scoped src="./findRanking.scss">

</style>
